<template>
  <div class="header-filter">
    <el-button type="success" @click="goDataPage">新增</el-button>
  </div>
  <gz-table
    :config="config"
    @handleCurrentChange="handleCurrentChange"
    @handleSizeChange="handleSizeChange"
  >
    <!-- 基本列插槽 -->
    <!-- <template #nameExpand="{ row: scope }">  </template> -->
    <!-- 操作列插槽 -->
    <template #handle="{ row: scope }">
      <el-button type="primary" @click="editClick(scope)"> 编辑 </el-button>
      <el-button type="danger" @click="removeClick(scope)"> 删除 </el-button>
    </template>
  </gz-table>
  <el-dialog
    title="编辑"
    v-model="dialogVisible"
    v-if="dialogVisible"
    width="850px"
  >
    <el-form
      ref="formRef"
      :rules="rules"
      :model="formData"
      label-width="160px"
      class="edit-form"
    >
      <el-form-item label="数据源名称" prop="name" class="item-inline">
        <el-input
          v-model="formData.name"
          placeholder="请输入数据源名称"
          show-word-limit
          clearable
          :style="{ width: '100%' }"
        ></el-input>
      </el-form-item>
      <el-form-item label="接口地址" prop="url" class="item-inline">
        <el-input
          v-model="formData.url"
          placeholder="请输入接口地址（例 http://www.usmartww.com.cn）"
          show-word-limit
          clearable
          :style="{ width: '100%' }"
        ></el-input>
      </el-form-item>
      <el-form-item label="请求方法" prop="method" class="item-inline">
        <el-radio-group v-model="formData.method" size="medium">
          <el-radio
            v-for="(item, index) in methodOptions"
            :key="index"
            :label="item.value"
            :disabled="item.disabled"
            >{{ item.label }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <el-form-item label="超时时间" prop="timeout" class="item-inline">
        <el-input-number
          :min="0"
          style="width: 230px"
          size="medium"
          v-model="formData.timeout"
          placeholder="请输入超时时间"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="参数">
        <el-button
          class="addData-small-button"
          type="primary"
          icon="el-icon-plus"
          @click="addParams"
        >
        </el-button>
      </el-form-item>
      <el-row
        :gutter="10"
        v-for="(item, index) in formData.parameter"
        :key="index"
      >
        <el-col :span="11">
          <el-form-item label="参数名">
            <el-input
              v-model="item.key"
              placeholder="请输入参数名"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="参数值">
            <el-input
              v-model="item.value"
              placeholder="请输入参数值"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-button
            class="addData-small-button"
            type="danger"
            icon="el-icon-minus"
            @click="removeParams(index)"
          >
          </el-button>
        </el-col>
      </el-row>
      <el-form-item label="数据源描述">
        <el-input
          type="textarea"
          :autosize="{ minRows: 4 }"
          placeholder="请输入数据源描述"
          v-model="formData.description"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="是否定时任务" prop="scheduled">
        <el-switch v-model="formData.scheduled"></el-switch>
      </el-form-item>
      <el-form-item
        label="导出接口地址"
        prop="outputUrl"
        v-if="!formData.scheduled"
      >
        <el-input
          v-model="formData.outputUrl"
          placeholder="请输入导出接口地址"
          clearable
          :style="{ width: '100%' }"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="定时频率"
        class="addData-form-timeFrequency"
        v-if="formData.scheduled"
        prop="frequency"
      >
        <el-button @click="open">打开cron表达式生成器</el-button>
        <CronUi ref="CronUiRef" @cronResult="resultValue"></CronUi>
        <p>最终生成的表达式为：{{ formData.frequency }}</p>
      </el-form-item>
      <el-form-item
        label="起止时间"
        prop="startEndTime"
        v-if="formData.scheduled"
      >
        <el-date-picker
          v-model="formData.startEndTime"
          type="datetimerange"
          range-separator="至"
          start-placeholder="请输入开始时间"
          end-placeholder="请输入结束时间"
          unlink-panels
          style="width: 100%"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item
        label="数据转换统计规则"
        class="addData-form-pretreatmentCode"
      >
        <el-select
          multiple
          collapse-tags
          v-model="formData.pretreatmentCodeId"
          placeholder="请选择脚本库"
        >
          <el-option
            v-for="item in formData.pretreatmentCodeList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <el-button type="primary" @click="goNewPage">新增</el-button>
      </el-form-item>
      <!-- 结果值映射 -->
      <map-relation
        ref="mapRelationRef"
        :mapRelation="mapRelation"
        @newAddMap="newAddMap"
      ></map-relation>
      <el-form-item
        label="存储位置"
        prop="storageLocation"
        v-if="formData.scheduled"
      >
        <el-radio-group v-model="formData.storageLocation" size="medium">
          <el-radio
            v-for="(item, index) in storageLocationOptions"
            :key="index"
            :label="item.value"
            :disabled="item.disabled"
            >{{ item.label }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="是否清空表再插入数据"
        v-if="formData.scheduled && formData.storageLocation == 1"
        prop="truncateTable"
      >
        <el-switch v-model="formData.truncateTable"></el-switch>
      </el-form-item>
      <el-form-item
        label="列映射关系"
        v-if="formData.scheduled && formData.storageLocation == 1"
      >
        <el-button type="primary" @click="addDatabaseDialog"> 配置 </el-button>
        <span v-if="formData.tableName">
          数据库表：{{ formData.tableName }}
        </span>
        <span v-else> 暂无配置表</span>
      </el-form-item>
      <el-form-item
        label=""
       
        v-if="formData.tableName && formData.storageLocation == 1"
      >
        <div class="header-filter">
          <el-button type="success" size="mini" @click="addColumnData"
            >新增</el-button
          >
        </div>
        <gz-table :config="columnRConfig">
          <template #keySlot="{ row: scope }">
            <el-input
              size="mini"
              clearable
              v-model="scope.key"
              placeholder="请输入列名"
            ></el-input>
          </template>
          <template #valueSlot="{ row: scope }">
            <el-input
              size="mini"
              clearable
              v-model="scope.value"
              placeholder="请输入值映射"
            ></el-input>
          </template>
          <!-- 操作列插槽 -->
          <template #handle="{ row: scope }">
            <el-button
              type="danger"
              size="mini"
              @click="removeColumnClick(scope)"
            >
              删除
            </el-button>
          </template>
        </gz-table>
      </el-form-item>
      <el-form-item
        label="RedisKey"
        v-if="formData.scheduled && formData.storageLocation == 2"
      >
        <el-input
          v-model="formData.redisKey"
          placeholder="请输入redisKey"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="editSubmit">确 定</el-button>
    </template>
  </el-dialog>

  <!-- 列映射关系 -->
  <el-dialog
    title="配置"
    width="441px"
    v-model="columnDialogVisible"
    :close-on-click-modal="false"
    v-if="columnDialogVisible"
  >
    <column-map-relation
      ref="columnMapRef"
      @tableSuccessBuild="tableSuccessBuild"
    ></column-map-relation>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="columnDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="configSubmit">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import gzTable from "@/components/table/index.vue";
import CronUi from "@/components/corn/cron-ui/index";
import mapRelation from "@/views/addData/components/mapRelation.vue";
import columnMapRelation from "@/views/addData/components/columnMapRelation.vue";
const validateFrequency = (rule, value, callback) => {
  if (!value) {
    callback(new Error("请设置定时频率"));
  } else {
    callback();
  }
};
import { reactive, toRefs, ref, onMounted, watch } from "vue";
export default {
  components: {
    gzTable,
    CronUi,
    mapRelation,
    columnMapRelation,
  },
  setup() {
    const mapRelationRef = ref(null);
    const formRef = ref(null);
    const columnMapRef = ref(null);
    const CronUiRef = ref(null);
    const dialogVisible = ref(false);
    const columnDialogVisible = ref(false);
    const state = reactive({
      rowId: "", // 每行数据源id
      rules: {
        name: [
          {
            required: true,
            message: "请输入数据源名称",
            trigger: "blur",
          },
        ],
        url: [
          {
            required: true,
            message: "请输入接口地址",
            trigger: "blur",
          },
        ],
        method: [
          {
            required: true,
            message: "请求方法不能为空",
            trigger: "change",
          },
        ],
        timeout: [
          {
            required: true,
            message: "请输入超时时间",
            trigger: "blur",
          },
        ],
        outputUrl: [
          {
            required: true,
            message: "请输入导出接口地址",
            trigger: "blur",
          },
        ],
        frequency: [
          {
            required: true,
            validator: validateFrequency,
          },
        ],
        startEndTime: [
          {
            required: true,
            message: "起止时间不能为空",
            trigger: "change",
          },
        ],
        storageLocation: [
          {
            required: true,
            message: "存储位置不能为空",
            trigger: "change",
          },
        ],
      },
      mapRelation: {
        labelName: "结果值映射",
        keyName: "列名",
        placeholderKeyName: "请输入列名",
        valueName: "值映射",
        placeholderValueName: "请输入值映射",
      },
      methodOptions: [
        {
          label: "GET",
          value: "GET",
        },
        {
          label: "POST",
          value: "POST",
        },
      ],
      storageLocationOptions: [
        {
          label: "数据库",
          value: 1,
        },
        {
          label: "Redis",
          value: 2,
        },
      ],
      formData: {
        name: "",
        url: "",
        method: "",
        timeout: 10,
        parameter: [],
        description: "",
        scheduled: true,
        outputUrl: "",
        frequency: "",
        startEndTime: [],
        startTime: null,
        endTime: null,
        pretreatmentCodeList: [], // 数据转换 脚本库集合
        pretreatmentCodeId: [], // 数据转换 脚本库id集合
        storageLocation: 1,
        columnRelationshipId: "",
        resultRelationship: "",
        cronExpression: "",
        tableName: "",
        tableId: "",
        redisKey: "",
        truncateTable: false,
      },
      config: {
        // 表格样式
        style: {
          stripe: true,
          border: true,
          maxHeight: 700,
        },
        loading: false,
        // 分页设置
        pagination: {
          current: 1,
          limit: 10,
          total: 0,
        },
        // 列
        column: [
          {
            prop: "index",
            type: "index",
            label: "序号",
            width: 50,
          },
          {
            prop: "name",
            label: "数据源名称",
            width: 200,
          },
          {
            prop: "url",
            label: "接口地址",
            width: 200,
          },
          {
            prop: "method",
            label: "请求方法",
            width: 80,
          },
          {
            prop: "timeout",
            label: "超时时间（秒）",
            width: 120,
          },
          {
            prop: "parameter",
            label: "接口参数",
            width: 150,
          },
          {
            prop: "scheduled",
            label: "是否定时任务",
            width: 110,
            formatter(val) {
              return val.scheduled ? "是" : "否";
            },
          },
          {
            prop: "outputUrl",
            label: "导出接口地址",
            width: 150,
          },
          {
            prop: "frequency",
            label: "定时频率",
            width: 100,
          },
          {
            prop: "startTime",
            label: "开始时间",
            width: 180,
          },
          {
            prop: "endTime",
            label: "结束时间",
            width: 180,
          },
          {
            prop: "pretreatmentCodeId",
            label: "脚本库",
            width: 150,
            formatter(value) {
              return (
                value.pretreatmentCodeId
                  .filter((p) => {
                    return p.name;
                  })
                  .map((i) => {
                    return i.name;
                  })
                  .join(",") || "-"
              );
            },
          },
          {
            prop: "resultRelationship",
            label: "结果值映射",
            width: 150,
          },
          {
            prop: "tableName",
            label: "入库表名",
            width: 150,
          },
          {
            prop: "truncateTable",
            label: "是否清空数据表后再插入数据",
            width: 110,
            formatter(val) {
              return val.truncateTable ? "是" : "否";
            },
          },
          {
            prop: "redisKey",
            label: "redisKey",
            width: 150,
          },
          {
            prop: "description",
            label: "数据源描述",
            width: 150,
          },
          {
            type: "operate",
            label: "操作",
            width: 200,
            fixed: "right",
            slotName: "handle",
          },
        ],
        tableData: [],
      },
      columnRConfig: {
        // 表格样式
        style: {
          stripe: true,
          border: true,
          size: "mini",
          maxHeight: 700,
        },
        loading: false,
        // 列
        column: [
          {
            prop: "key",
            label: "列名",
            width: 200,
            slotName: "keySlot",
          },
          {
            prop: "value",
            label: "值映射",
            width: 300,
            slotName: "valueSlot",
          },
          {
            type: "operate",
            label: "操作",
            width: 100,
            fixed: "right",
            slotName: "handle",
          },
        ],
        tableData: [],
      },
    });
    watch(
      () => [state.formData.scheduled, state.formData.storageLocation],
      ([scheduledValue, storageLocationValue]) => {
        // scheduledValue true:导出接口地址清空 false:定时频率,起止时间,存储位置归数据库,列映射关系id清空
        if (scheduledValue) {
          getScriptLibrary(); // 获取脚本库
          state.formData.outputUrl = "";
        } else {
          state.formData.frequency = "";
          state.formData.startEndTime = "";
          state.formData.storageLocation = 1;
          state.formData.tableName = "";
          state.formData.columnRelationshipId = "";
          state.formData.tableId = "";
          state.formData.redisKey = "";
          state.columnRConfig.tableData = [];
        }
        // storageLocationValue 1:数据库 2:Redis
        if (storageLocationValue === 1) {
          state.formData.redisKey = "";
        }
        if (storageLocationValue === 2) {
          state.formData.tableId = "";
          state.formData.tableName = "";
          state.formData.columnRelationshipId = "";
        }
      }
    );
    onMounted(() => {
      getTableData();
    });

    // 获取脚本库
    const getScriptLibrary = async () => {
      state.formData.pretreatmentCodeList = await vm.$store.dispatch(
        "GET_SCRIPT"
      );
    };
    const getTableData = async () => {
      try {
        state.config.loading = true;
        let result = await vm.$store.dispatch("GET_TABLE_SOURCE", {
          limit: state.config.pagination.limit, //当前页最大显示数
          page: state.config.pagination.current, //当前页
        });
        state.config.tableData = result.records;
        state.config.pagination.total = result.total;
        state.config.pagination.current = result.current;
        state.config.loading = false;
      } catch (error) {
        console.log(error);
      }
    };
    const handleSizeChange = (val) => {
      state.config.pagination.limit = val;
      getTableData();
    };
    const handleCurrentChange = (val) => {
      state.config.pagination.current = val;
      getTableData();
    };
    const getColumnTableData = (columnId) => {
      vm.$axios
        .get("/api/v1/dataengine/columnRelationship/getById", {
          params: {
            id: columnId,
          },
        })
        .then((res) => {
          let ress = JSON.parse(res.relationContent);
          let arr = [];
          for (const key in ress) {
            let obj = {
              key: "",
              value: "",
            };
            obj.key = key;
            obj.value = ress[key];
            arr.push(obj);
          }
          state.columnRConfig.tableData = arr.filter((item) => {
            return item.key != "de_inserttime";
          });
        })
        .catch((err) => {});
    };
    // 编辑回显数据
    const editClick = (rowData) => {
      let result = vm.$tool.deepClone(rowData);
      // 根据列映射id获取列关系表格数据

      if (result.columnRelationshipId) {
        getColumnTableData(result.columnRelationshipId);
      }
      state.rowId = result.id;
      dialogVisible.value = true;
      state.formData.scheduled = result.scheduled;
      // 给结果值映射组件 传值
      vm.$nextTick(() => {
        mapRelationRef.value.parameter = mapRelationRef.value.parameter
          ? vm.$tool.objToArray(JSON.parse(state.formData.resultRelationship))
          : "";
      });
      // 判断为定时任务 获取脚本库
      if (state.formData.scheduled) {
        getScriptLibrary(); // 获取脚本库
        state.columnRConfig.tableData = [];
        state.formData.frequency = result.frequency;
        state.formData.startEndTime =
          result.startTime && result.endTime
            ? [result.startTime, result.endTime]
            : "";
        state.formData.tableName = result.tableName;
        state.formData.tableId = result.tableId;
        state.formData.columnRelationshipId = result.columnRelationshipId; // 列映射关系
        state.formData.pretreatmentCodeId = result.pretreatmentCodeId.map(
          (r) => {
            return r.id;
          }
        ); // 脚本id集合[]
        state.formData.resultRelationship =
          Object.keys(result.resultRelationship).length > 0
            ? JSON.stringify(result.resultRelationship)
            : ""; // 结果值映射

        state.formData.storageLocation = result.redisKey ? 2 : 1; // 存储位置
        state.formData.redisKey = result.redisKey;
      } else {
        state.formData.outputUrl = result.outputUrl;
      }
      state.formData.name = result.name;
      state.formData.url = result.url;
      state.formData.method = result.method;
      state.formData.timeout = result.timeout;
      state.formData.parameter = vm.$tool.objToArray(
        result.parameter ? JSON.parse(result.parameter) : {}
      );
      state.formData.description = result.description;
      state.formData.truncateTable = result.truncateTable;
    };

    // 新增列映射关系
    const addColumnData = () => {
      state.columnRConfig.tableData.push({
        key: "",
        value: "",
      });
    };
    // 编辑 保存列映射关系
    const saveColumnData = (columnRelationshipId) => {
      let isde_inserttime = state.columnRConfig.tableData.find((item) => {
        return item.key == "de_inserttime";
      });
      if (!isde_inserttime) {
        state.columnRConfig.tableData.push({
          key: "de_inserttime",
          value: "",
        });
      }
      let relationContent = vm.$tool.arrayToObj(state.columnRConfig.tableData);
      vm.$axios
        .post("/api/v1/dataengine/columnRelationship/edit", {
          id: columnRelationshipId,
          relationContent: JSON.stringify(relationContent),
        })
        .then((res) => {
          vm.$message.success("列映射关系保存成功！");
        })
        .catch(() => {});
    };

    // 编辑数据源 确定
    const editSubmit = () => {
      formRef.value.validate((valid) => {
        if (!valid) return;
        if (!state.formData.scheduled) {
          state.formData.startTime = state.formData.endTime = "";
        } else {
          let [startTime, endTime] = state.formData.startEndTime;
          state.formData.startTime = vm.$tool.formatDateTime(startTime);
          state.formData.endTime = vm.$tool.formatDateTime(endTime);
        }
        // 当存在列映射Id时保存列映射关系
        if (state.formData.columnRelationshipId) {
          saveColumnData(state.formData.columnRelationshipId);
        }
        // // 结果值映射参数特殊处理
        // if (
        //   Array.isArray(state.formData.resultRelationship) &&
        //   state.formData.resultRelationship.length == 0
        // ) {
        //   state.formData.resultRelationship = "";
        // } else {
        //   state.formData.resultRelationship = JSON.stringify(
        //     state.formData.resultRelationship
        //   );
        // }
        // state.formData.resultRelationship=""
        // 处理定时频率传参
        vm.$axios
          .post("/api/v1/datasource/editDataSource", {
            id: state.rowId,
            name: state.formData.name,
            url: state.formData.url,
            parameter:
              state.formData.parameter.length > 0
                ? JSON.stringify(vm.$tool.arrayToObj(state.formData.parameter))
                : "",
            method: state.formData.method,
            timeout: state.formData.timeout,
            scheduled: state.formData.scheduled,
            outputUrl: state.formData.outputUrl,
            frequency: state.formData.frequency,
            startTime: state.formData.startTime,
            endTime: state.formData.endTime,
            tableName: state.formData.tableName,
            resultRelationship: state.formData.resultRelationship,
            columnRelationshipId: state.formData.columnRelationshipId,
            tableId: state.formData.tableId,
            truncateTable: state.formData.truncateTable,
            redisKey: state.formData.redisKey,
            description: state.formData.description,
            pretreatmentCodeId: state.formData.pretreatmentCodeId.map(
              (v, i) => {
                return { id: v, priority: i };
              }
            ),
          })
          .then((res) => {
            vm.$message.success("编辑数据源成功！");
            dialogVisible.value = false;
            getTableData();
          })
          .catch(() => {});
      });
    };
    const removeClick = (rowData) => {
      vm.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let result = await vm.$store.dispatch(
            "REMOVE_DATA_SOURCE",
            rowData.id
          );
          if (result) {
            vm.$message.success("删除成功!");
            getTableData();
          }
        })
        .catch(() => {
          vm.$message.success("已取消删除!");
        });
    };
    // 结果值映射 确定回调
    const newAddMap = async (data) => {
      state.formData.resultRelationship = data ? JSON.stringify(data) : "";
    };
    // 打开cron表达式
    const open = () => {
      CronUiRef.value.dialogVisible = true;
    };
    // cron表达式 确定回调
    const resultValue = (data) => {
      state.formData.frequency = data;
    };
    // 添加参数
    const addParams = () => {
      state.formData.parameter.push({
        key: "",
        value: "",
      });
    };
    // 删除参数
    const removeParams = (index) =>
      removeRowData(state.formData.parameter, index);
    // 删除行数据
    const removeRowData = (data, index) => {
      return data.splice(index, 1);
    };
    // 打开 列映射关系弹框
    const addDatabaseDialog = () => {
      columnDialogVisible.value = true;
    };
    // 成功新建数据库表 后回调
    const tableSuccessBuild = () => {
      // 调用 获取数据库表 方法
      columnMapRef.value.getDataTableList();
    };
    // 列映射关系 配置确定 回调
    const configSubmit = async () => {
      let tableId = columnMapRef.value.form.tableName;
      let columnData = columnMapRef.value.config.tableData;
      if (!tableId) {
        vm.$message.warning("请选择数据库表！");
        return false;
      }
      state.formData.tableName = columnMapRef.value.selectTableName;
      let relationContent = vm.$tool.arrayToObj(columnData);
      let result = await vm.$store.dispatch(
        "ADD_RESULT_RELATIONSHIP",
        relationContent
      );
      if (result && result.id) {
        state.columnRConfig.tableData = columnData;
        state.formData.columnRelationshipId = result.id;
        vm.$message.success("列映射关系配置成功！");
        state.formData.tableId = tableId;
        columnDialogVisible.value = false;
      }
    };
    // 跳转到 Java代码新页面
    const goNewPage = () => {
      // window.open("../../.././resources/templates/index.html", "_blank");
      vm.$router.push("/addJavaScript");
    };
    const goDataPage = () => {
      vm.$router.push("/addData");
    };
    // 删除列映射关系
    const removeColumnClick = (rowData) => {
      // 获取当前列索引
      let findIndex = state.columnRConfig.tableData.findIndex(
        (tItem) => tItem.key == rowData.key
      );
      if (findIndex > -1) {
        state.columnRConfig.tableData.splice(findIndex, 1);
      }
    };
    return {
      mapRelationRef,
      formRef,
      columnMapRef,
      CronUiRef,
      dialogVisible,
      columnDialogVisible,
      ...toRefs(state),
      getScriptLibrary,
      getTableData,
      handleSizeChange,
      handleCurrentChange,
      editClick,
      editSubmit,
      removeClick,
      newAddMap,
      open,
      resultValue,
      addParams,
      removeParams,
      addDatabaseDialog,
      tableSuccessBuild,
      configSubmit,
      goNewPage,
      goDataPage,
      getColumnTableData,
      removeColumnClick,
      saveColumnData,
      addColumnData,
    };
  },
};
</script>

<style scoped>
.header-filter {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 10px;
}
.edit-form .item-inline {
  width: 50%;
  display: inline-block;
}
.addData-form-pretreatmentCode >>> .el-input__inner {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.addData-form-pretreatmentCode >>> .el-button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-top: -1px;
}
</style>
